//顶部
var classiFication=document.querySelector('.classification') //弹出框
var oTopBtn=document.querySelectorAll('.homePage')
var checked=true
oTopBtn[0].onclick=function(){
    this.classList.add('active')
    oTopBtn[1].classList.remove('active')
    classiFication.style.display='none';
}
oTopBtn[1].onclick=function(){
    this.classList.add('active')
    oTopBtn[0].classList.remove('active')
    if(checked){
        classiFication.style.display='block';
        checked=false;
    }else{
        classiFication.style.display='none';
        checked=true;
    }
        
    
    
}

//注册登录
var oPasswd=document.querySelector('.headPortrait')
var oPasswdPage=document.querySelector('.headPortraitbox')
oPasswd.onclick=function(){
    if(checked){
        oPasswdPage.style.display='block'
        checked=false
    }else{
        oPasswdPage.style.display='none'
        checked=true
    }
    
}
//消息弹出框
var oMessBtn=document.querySelector('.message')
var oMessBox=document.querySelector('.messageBox')
var oDelBtn=document.querySelector('.messageBox-right-top img')
oMessBtn.onclick=function(){
    if(checked){
        oMessBox.classList.add('on')
        checked=false
    }else{
        checked=true
    }
}
oDelBtn.onclick=function(){
    oMessBox.classList.remove('on')
    checked=true
}

//导航栏
var  oNav=document.querySelectorAll('.navbox')
var oImg=document.querySelectorAll('.navbox-right img')
for(var i=0;i<oNav.length;i++){
    oNav[i].index=i
    oNav[i].onclick=function(){
        var oUl=this.nextElementSibling;
        var oLi=oUl.children
        if(getComputedStyle(oUl).height=='0px'){
            oUl.style.height=oLi[0].offsetHeight*oLi.length +20*oLi.length+'px'
            oImg[this.index].style.transform='rotate('+90+'deg)'
        }else{
            oUl.style.height=0
            oImg[this.index].style.transform='rotate('+0+'deg)'
        }
        
    }
}
var onboSe= document.querySelectorAll('.onboarding-select')
var oSele=document.querySelectorAll('#produce')
for(var i=0;i<onboSe.length;i++){
   onboSe[i].index=i
   
    onboSe[i].onclick=function(){
        if(oSele[this.index].style.display=='block'){
           oSele[this.index].style.display='none'
        }else{
           oSele[this.index].style.display='block';
        }
    }
}
var oLi1=document.querySelectorAll('.bumen li')
 for(var i=0;i<oLi1.length;i++){
     oLi1[i].onclick=function(){
         var oSpan=this.parentElement.parentElement.previousElementSibling
         oSpan.innerHTML=this.innerHTML
             }
 }

var data=[
    {id:'TK20220303001',details:'苹果thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303002',details:'苹果thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303003',details:'联想thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303004',details:'联想thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303005',details:'联想thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303006',details:'联想thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303007',details:'联想thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303008',details:'雷神thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303009',details:'雷神thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303010',details:'雷神thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303011',details:'雷神thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303012',details:'雷神thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303013',details:'雷神thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303014',details:'雷神thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303015',details:'雷神thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303016',details:'苹果thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303017',details:'苹果thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303018',details:'苹果thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303019',details:'苹果thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},
    {id:'TK20220303020',details:'苹果thinkplus会议平板',area:'本地仓库/东仓',bumen:'产品部',peopel:'王培',date:'2022-08-06',number:'3',money:'3000.00',manger:'Giovan'},

]
var page=1;
//当前页码为1
var count=10;
//每页有多少条
var oTbody=document.querySelector('.table tbody')
//搜索框
var oSearch=document.querySelector('.serch input')
var oSearchBt=document.querySelector('.serch img')
var oPagination=document.querySelector('.pagination')

function render(){
    var str=oSearch.value;  //搜索得内容
    var renderData=[]  //准备一个空数组来存我们搜索出来的数据
    if(str.trim()==''){
        renderData=data
    }else{
        for(var i=0;i<data.length;i++){  //循环数据
        if(data[i].details.includes(str)){    //如果搜索得内容等于数据里面的内容
            renderData.push(data[i])  //就加入进存搜索出来的数组里
        }
    }}

oTbody.innerHTML='';
var renderArr=renderData.slice((page-1)*count,page*count) 
for(var i=0;i<renderArr.length;i++){
    //循环渲染得数据
    var oTr=document.createElement('tr')
    oTr.innerHTML=`
        <td>${renderArr[i].id}</td>
        <td>${renderArr[i].details}</td>
        <td>${renderArr[i].area}</td>
        <td>${renderArr[i].bumen}</td>
        <td>${renderArr[i].peopel   }</td>
        <td>${renderArr[i].date}</td>
        <td>${renderArr[i].number}</td>
        <td>${renderArr[i].money}</td>
        <td>${renderArr[i].manger}</td>
        <td>
            
            <a class="del">删除</a>
            
        </td>
    `
        oTbody.appendChild(oTr)
}
//渲染页码
var aPagBtn=document.querySelectorAll('.pageBtn')
for(var i=0;i<aPagBtn.length;i++){
    oPagination.removeChild(aPagBtn[i].parentNode)
}
for(var i=1;i<=Math.ceil(data.length/count);i++){
var oLi=document.createElement('li')
oLi.innerHTML=`<a href="#" class="pageBtn">${i}</a>`
if(i==page){
    oLi.classList.add('active')
}
oPagination.insertBefore(oLi,oPagination.lastElementChild)
}
}
render()
//给分页加事件
oPagination.addEventListener('click',changePage)
function changePage(){
    if(event.target.className=='pageBtn'){
        // var aPagBtn=document.querySelectorAll('.pageBtn')
        // for(var i=0;i<aPagBtn.length;i++){
        //     aPagBtn[i].parentNode.classList.remove('active')
        // }
        // event.target.parentNode.classList.add('active')
        page=event.target.innerText;
        render();
    }
}

//给上一页下一页添加事件
var oPrev=document.querySelector('.prev')
var oNext=document.querySelector('.next')
oPrev.addEventListener('click',prevFn)
oNext.addEventListener('click',nextFn)
function prevFn(){
    if(page>1){
        page--
    }
    render()
}
function nextFn(){
    if(page<Math.ceil(waitArr.length/count)){
        page++
        render()
    }
}


oTbody.addEventListener('click',delFn)
function delFn(){
    if(event.target.className.includes('del')){
        //找到id
        var id=event.target.parentNode.parentNode.children[0].innerText
        //循环数据看id是否相等  相等就删除
        for(var i=0;i<data.length;i++){
            if(data[i].id==id){
                data.splice(i,1)
            }
        }
        render()//重新渲染
    }
}



//搜索按钮
oSearchBt.addEventListener('click',searchFn)
function searchFn(){
    page=1
    render()
}

//添加
var oAddBtn=document.querySelector('.button')
oAddBtn.addEventListener('click',addFn)
function addFn(){
    
    // var addNmae=document.querySelector('.addname').value
    // if(addNmae.trim()==''){
    //     alert('请输入内容')
    //     return
    // }
    var id=document.querySelector('.danhao').value
    var asset=document.querySelector('.asset').value
    var buMen=document.querySelector('.buMen').innerText
    var area=document.querySelector('.area').innerText

    var date=document.querySelector('.date').value
    var people=document.querySelector('.people').value
    var number=document.querySelector('.number').value
    var money=document.querySelector('.money').value
    
    data.unshift({
        id:'TK202203030'+ parseInt(Math.random(100-20)*100+20),
        details:asset,
        area:area,
        bumen:buMen,
        date:date,
        peopel:people,
        number:number,
        money:money,
        manger:'Gionan'
    })
    
    render()
}
